<template>
  <section class="w1 h1" style="position:relative;">
    <div class="agent-page-head">
      <h2>用电安全物联网平台</h2>
    </div>
    <div id="agent-map-bottle" class="w1 h1"></div>
  </section>
</template>
<script>
import AMapLoad from '@/utils/AMapLoad'
import { mapMutations } from 'vuex'
import { getCompanyListByCity } from '@/api'
export default {
  mounted() {
    AMapLoad().then(() => {
      this.initState()
    })
  },
  beforeDestroy() {
    const vm = this
    vm.mapBottle && vm.mapBottle.destroy()
  },
  data() {
    return {
      mapBottle: null
    }
  },

  methods: {
    ...mapMutations(['SET_COMPANYID']),

    initState() {
      const vm = this
      vm.$nextTick(() => {
        vm.mapBottle = new window.AMap.Map('agent-map-bottle', {
          mapStyle: 'amap://styles/8424aa3d2c0d37b84f433d36eb8252af',
          resizeEnable: true,
          center: [106.788371, 33.311534],
          zoom: 5.5
        })

        // console.log(vm.mapBottle)
        getCompanyListByCity({}).then(res => {
          if (res.code == 200) {
            res.data.forEach(t => {
              var marker = new window.AMap.Marker({
                map: this.mapBottle,
                position: new window.AMap.LngLat(t.lng, t.lat),
                title: t.address + t.name
              })
              var infoWindow = new window.AMap.InfoWindow({
                offset: new window.AMap.Pixel(0, -30)
              })
              marker.setMap(vm.mapBottle)
              marker.setLabel({
                //修改label相对于maker的位置
                offset: new window.AMap.Pixel(20, 20),
                content: `<div class="info"><span style="font-weight:bold">地址：</span>${
                  t.address
                }</div><br/>
                <div class="info"><span style="font-weight:bold">企业名称：</span>${
                  t.name
                }</div>`
              })
              marker.on('click', function(item) {
                vm.SET_COMPANYID(t.id)
                vm.$router.replace('/datacenter')
              })
            })

            // 自适应显示多个点标记
            vm.mapBottle.setFitView()
          }
        })
      })
    }
  }
}
</script>
